<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>余额退还</title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
		<script type="text/jscript" th:src="@{/plugin/jquery.min.js}"></script>
		<script>
		
		
		<!--翻页方法 -->
		function paging(arg){
			var wriststrp_id=$("#idnum").val();
			var pageNum=$("#text").val();
			var total=$("#totalpage").val();
			var tel=$("#tel").val();
			
			//改变后的页面
			var page=parseInt(pageNum)+arg;
			
			
			if(page<1||page>total){
				return;	
			}
			
			//刷新页面
			getPagebean(wriststrp_id,tel,4,page);
			
		}
		
		
		<!-- 获取信息分页bean -->
		function getPagebean(wriststrp_id,tel,state,page){
			var customer_name=$("#customer_name").val();
			
			$.post(
					"[[@{/conditionQuerry}]]"
					,{
					wriststrp_id : wriststrp_id,
					"customer.tel" : tel,
					"customer.customer_name" : customer_name  ,
					info_state : 4,
					pageindex : page,
					size : 8
					
					},
					function(pagebean){
						if(pagebean==""){
							alert("没找到相关信息！");
							$("#content").html("");
							return;
						}
						var data=pagebean.beanList;
						if(data!=""){
							var context="";
						$.each(data,function(index,obj){
							
							
							context+=
							'<tr >'
							+'<td class="layui-col-md1" style="height: 30px; text-align: center; line-height: 30px;">'
							
							+'<div class="layui-col-md6" style="text-align: right;"><input name="checkbox" type="checkbox" value="'+obj.wriststrp_id+'" /></div><div class="layui-col-md6">'
							+((index+1)+(page-1)*8)+'</div>'
							+'</td><td class="layui-col-md1" style="height: 30px; text-align: center; line-height: 30px;">'
							+obj.wriststrp_id
							+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
							+obj.createtime
							+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
							+obj.endtime
							+'</td><td class="layui-col-md1" style="height: 30px; text-align: center; line-height: 30px;">'
							+"强制结算" 
							+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
							+obj.balance
							+'</td><td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">'
							+obj.customer.tel
							+'</td><td class="layui-col-md1" style="height: 30px; text-align: center; line-height: 30px;">'
							+'<select type="radio" name="pledge"> <option>是</option><option>否</option> </select>' 
							+'</td></tr>'
								});
						
						var pagecontent=
							'<a href="javaScript:paging(-1)" >上一页</a> '
						+' 第 <span>'
						+pagebean.pageIndex+"/"+pagebean.totalPage+'</span>页 '
						+' <a href="javaScript:paging(1)" >下一页</a>';
						//翻页菜单
						$("#pagemenu").html(pagecontent);
						
						//当前页码
						$("#text").val(pagebean.pageIndex);
						
						$("#totalpage").val(pagebean.totalPage);
						
						$("#content").html(context);
						return;	
						}else{
							alert("相关用户信息不存在！");
							$("#content").html("");
						}
					
					});	
		}
		
			
		//营业时间
		
		function showTime() {
		 var	nowtime = new Date();
		 var	year = nowtime.getFullYear();
		 var	month = nowtime.getMonth() + 1;
		 var	date = nowtime.getDate();
			$("#mytime").html(year + "年" + month + "月" + date +"日");
			$("#mytime2").html("营业时间：" +nowtime.toLocaleTimeString());
		};
		
	$(function(){
		
		setInterval("showTime()", 1000);
		
		
	})
		<!-- 模拟按键功能，点击div变小-->
		$(function(){
			<!-- 查询按钮 -->
			$("#key1").mousedown(function(){
				$("#key1").css("font-size","20px");
			})
			$("#key1").mouseup(function(){
				$("#key1").css("font-size","25px");
				
				<!--点击释放后查询腕带信息  -->
				var wriststrp_id=$("#wriststrp_id").val();
				var tel=$("#tel").val();
				var state=4;
				getPagebean(wriststrp_id,tel,state,1);
			})
			
			<!-- 退还按钮  -->
			$("#key2").mousedown(function(){
				$("#key2").css("font-size","20px");
			})
			$("#key2").mouseup(function(){
				$("#key2").css("font-size","25px");
				
				var values=[];
				$("input[name='checkbox']:checked").each(function(){
					//给数组赋值 
					values.push($(this).val());
					
				});
				alert(values.length==0?"没有选中任何信息":values);
				
			})
			
			<!-- 充公按钮  -->
			$("#key3").mousedown(function(){
				$("#key3").css("font-size","20px");
			})
			$("#key3").mouseup(function(){
				$("#key3").css("font-size","25px");
			})
			
			<!-- 关闭按钮  -->
			$("#key4").mousedown(function(){
				$("#key4").css("font-size","20px");
			})
			$("#key4").mouseup(function(){
				$("#key4").css("font-size","25px");
			})
			
		})
		
		</script>
	</head>
	<body>
	<!-- 页码控制 -->
	<input type="hidden" id="text">
	<input type="hidden" id="totalpage">
		<!--最外层容器控制位置-->
		<div id="" class="container" style="height:500px; margin: 30px 100px;">
			<div id="" class="layui-row ">

				<!--  左边操作功能模块-->
				<div id="" class="layui-col-md12 layui-bg-gray" style="height: 500px;">
					<div id="" class="layui-row ">
						<!-- 左侧菜单框-->
						<div id="" class="layui-col-md10 " style=" height: 500px;">
							<!-- 印刷号 -->
							<div id="" class="layui-col-md12" style="border:#40AFFE 2px solid ; background-color: white; height: 120px;">
								<div id="" class="layui-col-md6" style="height: 40px; text-align: center;line-height: 40px; font-size: 20px;">
									<div id="" class="layui-col-md6" style="text-align: right;">
										腕&nbsp;带&nbsp;编&nbsp;号：
									</div>
									<div id="" class="layui-col-md6" style="text-align: left;">
										<input id="wriststrp_id" type="text" size="10" ;  />
									</div>
								</div>
								<div id="" class="layui-col-md6" style="height: 40px; text-align: center;line-height: 40px;font-size: 20px;">
									<div id="" class="layui-col-md6" style="text-align: right;">
										手&nbsp;机&nbsp;号&nbsp;码：
									</div>
									<div id="" class="layui-col-md6" style="text-align: left;">
										<input id="tel" type="text" size="10" ; />
									</div>


								</div>
								<div id="" class="layui-col-md6" style="height: 40px; text-align: center;line-height: 40px;font-size: 20px;">
									<div id="" class="layui-col-md6" style="text-align: right;">
										用&nbsp;户&nbsp;姓&nbsp;名：
									</div>
									<div id="" class="layui-col-md6" style="text-align: left;">
										<input id="customer_name" type="text" size="10" ; />
									</div>
								</div>
								
							</div>
							<!-- 消费项目列表 -->
							<div id="" class="layui-col-md12" style="margin-top: 5px; background-color: #93D1FF;font-size: 20px; height: 30px;">
								&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-list" style="font-size: 20px;"></i>强制结算腕带信息
							</div>
							<div id="" class="layui-col-md12">
								<table border="1px" bordercolor="#f2f2f2" width="100%">
									<tr bgcolor="#007DDB">
										<td class="layui-col-md1" style="height: 30px; text-align: center; line-height: 30px;">序号</td>
										<td class="layui-col-md1" style="height: 30px; text-align: center; line-height: 30px;">腕带编号</td>
										<td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">创建时间</td>
										<td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">结算时间</td>
										<td class="layui-col-md1" style="height: 30px; text-align: center; line-height: 30px;">腕带类型</td>
										<td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">账户余额</td>
										<td class="layui-col-md2" style="height: 30px; text-align: center; line-height: 30px;">电话号码</td>
										<td class="layui-col-md1" style="height: 30px; text-align: center; line-height: 30px;">是否退押金</td>
									</tr>
								<tbody id="content">
								
								</tbody>
									
								</table>
							</div>
							<!-- 翻页 -->
						<div id="pagemenu" class="layui-col-md12"
							style="position: absolute; text-align: center; font-size: 20px; bottom: 20px;">
						</div>
						
						</div>

						<!-- 右侧菜单-->
						<div id="" class="layui-col-md2" style="height: 500px; ">
							<div id="" style=" width: 100%; color: white;  text-align: center;">

								<div id="key1" style="text-align: center; background-color: #01AAED; font-size: 25px; margin: 15px;border: #009688 1px solid; width: 75%;height: 75px;line-height: 75px;">
									<i class="layui-icon layui-icon-search" style="font-size: 25px;"></i> 查询
								</div>
								<div id="key2"  style="text-align: center; background-color: #00FF00; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%;height: 75px;line-height: 75px;">
									<i class="layui-icon layui-icon-util" style="font-size: 25px;"></i>退还
								</div>
								<div id="key3"  style="text-align: center; background-color: #00FFFF; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%;height: 75px;line-height: 75px;">
									<i class="layui-icon layui-icon-password" style="font-size: 25px;"></i>充公
								</div>
								<div id="key4"  style="text-align: center; background-color: #FF5722; font-size: 25px; margin: 15px; border: #009688 1px solid; width: 75%;height: 75px;line-height: 75px;">
									<i class="layui-icon layui-icon-close-fill" style="font-size: 25px;"></i>关闭
								</div>
							</div>



						
						</div>
					</div>


				</div>
			</div>
			<!-- 页脚-->
				<div class="layui-row layui-bg-gray" style="text-align: center;">
					<div id="mytime" class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> </div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 操作用户：yanhui</div>
					<div id="mytime2"  class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"></div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 某某游乐园</div>
				</div>
		</div>

		

	</body>
</html>
